<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
  </head>

  <body>
    <div id="app">
      <button @click="count++">count++</button>
      <button @click="num++">num++</button>
      <p>count:{{count}}------num:{{num}}</p>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            count: 0,
            num: 1,
          };
        },
        computed: {
          /* 
            computed可以同时监听多个属性的变化 并重新计算值
            我们可以让计算属性返回一个对象 包含所有监听的属性
            一旦监听的属性发生改变 则computed就会重新计算得到新的属性值
            */
          countAndNum() {
            const { count, num } = this;
            return { count, num };
          },
        },
        watch: {
          //深度监听刚才的计算属性 只要计算属性内部有任何的变化 watch都可以侦听到了
          countAndNum: {
            deep: true,
            handler() {
              console.log("count或者num发生了改变");
            },
          },
        },
      });
    </script>
  </body>
</html>
